<template>
  <div class="reports">
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card stat-card-primary">
        <div class="stat-icon">
          <el-icon><Money /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">¥{{ totalRevenue.toFixed(2) }}</div>
          <div class="stat-label">总收入</div>
        </div>
      </div>
      
      <div class="stat-card stat-card-success">
        <div class="stat-icon">
          <el-icon><TrendCharts /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">¥{{ totalExpense.toFixed(2) }}</div>
          <div class="stat-label">总支出</div>
        </div>
      </div>
      
      <div class="stat-card stat-card-warning">
        <div class="stat-icon">
          <el-icon><Wallet /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">¥{{ netProfit.toFixed(2) }}</div>
          <div class="stat-label">净利润</div>
        </div>
      </div>
      
      <div class="stat-card stat-card-info">
        <div class="stat-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ invoiceCount }}</div>
          <div class="stat-label">发票数量</div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <div class="chart-card">
        <div class="chart-header">
          <h3>收入趋势</h3>
          <el-select v-model="revenueChartType" size="small">
            <el-option label="月度" value="monthly" />
            <el-option label="季度" value="quarterly" />
            <el-option label="年度" value="yearly" />
          </el-select>
        </div>
        <div class="chart-content">
          <v-chart :option="revenueChartOption" style="height: 300px;" />
        </div>
      </div>
      
      <div class="chart-card">
        <div class="chart-header">
          <h3>支出分析</h3>
          <el-select v-model="expenseChartType" size="small">
            <el-option label="按类型" value="type" />
            <el-option label="按部门" value="department" />
          </el-select>
        </div>
        <div class="chart-content">
          <v-chart :option="expenseChartOption" style="height: 300px;" />
        </div>
      </div>
    </div>

    <!-- 详细报表 -->
    <div class="reports-tabs">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="收入报表" name="revenue">
          <div class="report-table">
            <div class="table-header">
              <h3>收入明细</h3>
              <el-button type="primary" @click="exportRevenue">导出报表</el-button>
            </div>
            <el-table :data="revenueData" border>
              <el-table-column prop="date" label="日期" width="120" />
              <el-table-column prop="customer" label="客户" width="200" />
              <el-table-column prop="invoiceNo" label="发票号" width="150" />
              <el-table-column prop="amount" label="金额" width="120">
                <template #default="{ row }">
                  ¥{{ row.amount.toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="type" label="类型" width="100" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag :type="row.status === 'paid' ? 'success' : 'warning'">
                    {{ row.status === 'paid' ? '已收款' : '待收款' }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="支出报表" name="expense">
          <div class="report-table">
            <div class="table-header">
              <h3>支出明细</h3>
              <el-button type="primary" @click="exportExpense">导出报表</el-button>
            </div>
            <el-table :data="expenseData" border>
              <el-table-column prop="date" label="日期" width="120" />
              <el-table-column prop="supplier" label="供应商" width="200" />
              <el-table-column prop="orderNo" label="订单号" width="150" />
              <el-table-column prop="amount" label="金额" width="120">
                <template #default="{ row }">
                  ¥{{ row.amount.toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="category" label="类别" width="100" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag :type="row.status === 'paid' ? 'success' : 'warning'">
                    {{ row.status === 'paid' ? '已付款' : '待付款' }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="利润报表" name="profit">
          <div class="report-table">
            <div class="table-header">
              <h3>利润分析</h3>
              <el-button type="primary" @click="exportProfit">导出报表</el-button>
            </div>
            <el-table :data="profitData" border>
              <el-table-column prop="period" label="期间" width="120" />
              <el-table-column prop="revenue" label="收入" width="120">
                <template #default="{ row }">
                  ¥{{ row.revenue.toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="expense" label="支出" width="120">
                <template #default="{ row }">
                  ¥{{ row.expense.toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="profit" label="利润" width="120">
                <template #default="{ row }">
                  <span :class="row.profit >= 0 ? 'profit-positive' : 'profit-negative'">
                    ¥{{ row.profit.toFixed(2) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="margin" label="利润率" width="100">
                <template #default="{ row }">
                  <span :class="row.margin >= 0 ? 'profit-positive' : 'profit-negative'">
                    {{ row.margin.toFixed(2) }}%
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
])

// 统计数据
const totalRevenue = ref(150000.00)
const totalExpense = ref(80000.00)
const netProfit = computed(() => totalRevenue.value - totalExpense.value)
const invoiceCount = ref(25)

// 图表类型
const revenueChartType = ref('monthly')
const expenseChartType = ref('type')

// 标签页
const activeTab = ref('revenue')

// 收入图表配置
const revenueChartOption = computed(() => ({
  title: {
    text: '收入趋势',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '收入',
      type: 'line',
      data: [12000, 15000, 18000, 22000, 25000, 28000],
      smooth: true,
      itemStyle: {
        color: '#409EFF'
      }
    }
  ]
}))

// 支出图表配置
const expenseChartOption = computed(() => ({
  title: {
    text: '支出分析',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '支出',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 30000, name: '原材料' },
        { value: 20000, name: '人工成本' },
        { value: 15000, name: '运营费用' },
        { value: 10000, name: '其他' },
        { value: 5000, name: '税费' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}))

// 收入数据
const revenueData = ref([
  {
    date: '2024-01-15',
    customer: '客户A',
    invoiceNo: 'INV-2024-001',
    amount: 15000.00,
    type: '销售',
    status: 'paid'
  },
  {
    date: '2024-01-14',
    customer: '客户B',
    invoiceNo: 'INV-2024-002',
    amount: 25000.00,
    type: '销售',
    status: 'paid'
  },
  {
    date: '2024-01-13',
    customer: '客户C',
    invoiceNo: 'INV-2024-003',
    amount: 8000.00,
    type: '服务',
    status: 'pending'
  }
])

// 支出数据
const expenseData = ref([
  {
    date: '2024-01-15',
    supplier: '供应商A',
    orderNo: 'PO-2024-001',
    amount: 10000.00,
    category: '原材料',
    status: 'paid'
  },
  {
    date: '2024-01-14',
    supplier: '供应商B',
    orderNo: 'PO-2024-002',
    amount: 15000.00,
    category: '设备',
    status: 'paid'
  },
  {
    date: '2024-01-13',
    supplier: '供应商C',
    orderNo: 'PO-2024-003',
    amount: 5000.00,
    category: '服务',
    status: 'pending'
  }
])

// 利润数据
const profitData = ref([
  {
    period: '2024年1月',
    revenue: 150000.00,
    expense: 80000.00,
    profit: 70000.00,
    margin: 46.67
  },
  {
    period: '2024年2月',
    revenue: 180000.00,
    expense: 95000.00,
    profit: 85000.00,
    margin: 47.22
  },
  {
    period: '2024年3月',
    revenue: 200000.00,
    expense: 110000.00,
    profit: 90000.00,
    margin: 45.00
  }
])

// 导出功能
const exportRevenue = () => {
  ElMessage.success('收入报表导出成功')
}

const exportExpense = () => {
  ElMessage.success('支出报表导出成功')
}

const exportProfit = () => {
  ElMessage.success('利润报表导出成功')
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped lang="scss">
.reports {
  .stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    
    .stat-card {
      display: flex;
      align-items: center;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      
      .stat-icon {
        font-size: 48px;
        margin-right: 20px;
        opacity: 0.8;
      }
      
      .stat-content {
        .stat-value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 5px;
        }
        
        .stat-label {
          color: $text-color-secondary;
          font-size: 14px;
        }
      }
      
      &.stat-card-primary {
        background: linear-gradient(135deg, $primary-color, lighten($primary-color, 20%));
        color: white;
      }
      
      &.stat-card-success {
        background: linear-gradient(135deg, $success-color, lighten($success-color, 20%));
        color: white;
      }
      
      &.stat-card-warning {
        background: linear-gradient(135deg, $warning-color, lighten($warning-color, 20%));
        color: white;
      }
      
      &.stat-card-info {
        background: linear-gradient(135deg, $info-color, lighten($info-color, 20%));
        color: white;
      }
    }
  }
  
  .charts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
    
    .chart-card {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      padding: 20px;
      
      .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        
        h3 {
          margin: 0;
          color: $text-color-primary;
        }
      }
      
      .chart-content {
        height: 300px;
      }
    }
  }
  
  .reports-tabs {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
    
    .report-table {
      .table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        
        h3 {
          margin: 0;
          color: $text-color-primary;
        }
      }
    }
  }
  
  .profit-positive {
    color: $success-color;
    font-weight: bold;
  }
  
  .profit-negative {
    color: $danger-color;
    font-weight: bold;
  }
}
</style> 